<template>
  <div class="h-15 bg-gradient-to-r from-blue-600 to-purple-600 flex items-center justify-between px-6 shadow-lg">
    <!-- 左侧Logo和标题 -->
    <div class="flex items-center space-x-4 cursor-pointer hover:opacity-80 transition-opacity" @click="goToDashboard">
      <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center">
        <el-icon class="text-blue-600"><ChatDotRound /></el-icon>
      </div>
      <h1 class="text-white font-bold text-xl">AI情感助手</h1>
    </div>
    
    <!-- 右侧用户信息 -->
    <div class="flex items-center space-x-4">
      <el-dropdown @command="handleCommand">
        <div class="flex items-center cursor-pointer hover:bg-white/10 rounded-lg px-3 py-2 transition-colors">
          <el-avatar :src="userInfo?.avatar" :size="32">
            <el-icon><User /></el-icon>
          </el-avatar>
          <span class="text-white ml-2 font-medium">{{ userDisplayName }}</span>
          <el-icon class="text-white ml-1"><ArrowDown /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">
              <el-icon><User /></el-icon>个人资料
            </el-dropdown-item>
            <el-dropdown-item command="settings">
              <el-icon><Setting /></el-icon>语音设置
            </el-dropdown-item>
            <el-dropdown-item divided command="logout">
              <el-icon><SwitchButton /></el-icon>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  ChatDotRound, 
  User, 
  ArrowDown, 
  Setting, 
  SwitchButton 
} from '@element-plus/icons-vue'

const router = useRouter()
const authStore = useAuthStore()

const userInfo = computed(() => authStore.userInfo)
const userDisplayName = computed(() => 
  userInfo.value?.nickname || userInfo.value?.username || '用户'
)

/**
 * 跳转到Dashboard页面
 */
const goToDashboard = () => {
  router.push('/dashboard')
}

const handleCommand = async (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'settings':
      router.push('/voice-settings')
      break
    case 'logout':
      try {
        await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await authStore.logout()
        await router.push('/login')
        ElMessage.success('已退出登录')
      } catch {
        // 用户取消
      }
      break
  }
}
</script>

<style scoped>
.h-15 {
  height: 60px;
}
</style>
